<template>
  <div class="base-form">
    <operation-title
      title="页面基础配置"
      :icon="TitleIcon"
    />
    <div class="divider" />
    <div class="func">
      <p class="attr">
        背景设置
      </p>
      <div class="adjust-item">
        <span style="flex-shrink: 0">设置背景</span>
        <el-radio-group v-model="pageConfig.useBackground">
          <el-radio :label="false">
            无
          </el-radio>
          <el-radio :label="true">
            自定义背景
          </el-radio>
        </el-radio-group>
      </div>

      <div
        v-if="pageConfig.useBackground"
        class="sub-options"
      >
        <div class="sub-option">
          <p class="label label__64">
            背景色
          </p>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.backgroundColor" />
          </span>
          <span class="value">{{ pageConfig.backgroundColor }}</span>
        </div>

        <div class="sub-option">
          <p class="label label__64">
            背景图
          </p>
          <span class="control-component">
            <Upload
              v-model="pageConfig.backgroundImageUrl"
              file-path="actapp/"
              list-type="picture-card"
            >
              <el-icon>
                <Plus />
              </el-icon>
            </Upload>
          </span>
          <!--          <span class="value">(建议图片高度40px)</span>-->
        </div>
      </div>
    </div>
    <div class="divideer" />
    <div class="func">
      <p class="attr">
        首页设置
      </p>
      <div class="adjust-item">
        <span>设为首页</span>
        <el-switch
          v-model="pageConfig.homePage"
          inline-prompt
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="0"
        />
      </div>
    </div>
    <!--    <div class="divider"></div>-->
    <!--    <div class="func">-->
    <!--      <p class="attr">底部Tab设置</p>-->
    <!--      <div class="adjust-item">-->
    <!--        <span style="flex-shrink: 0">启用Tab</span>-->
    <!--        <el-switch v-model="enableTab"></el-switch>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import TitleIcon from "@/assets/app/icon/secKill.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";
import { usePageConfig } from "@/views/activity/actApp/components/default/compositions/usePageConfig";

interface IPageConfig {
  useBackground: boolean;
  backgroundColor: string;
  backgroundImageUrl: string;
  homePage: number;
}

const props = withDefaults(defineProps<{
  pageConfig: IPageConfig;
  show: boolean;
}>(), {
  pageConfig: () => ({
    useBackground: false,
    backgroundColor: "#f2f4f7",
    backgroundImageUrl: "",
    homePage: 0,
  })
})

const emits = defineEmits<{
  (e: "update:page-config", value: IPageConfig): void;
  (e: "change-style", value: IPageConfig): void;
}>()

const { pageConfig } = usePageConfig<IPageConfig>(props, emits)

watch(() => props.pageConfig, () => {
  console.log("pagesetting pageConfig watch", props.pageConfig)
})
</script>

<style scoped lang="scss">
@use "../styles/operation";

</style>
